<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-06-08 15:41:59
 * @LastEditors: voanit
 * @LastEditTime: 2022-06-08 15:42:08
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>

<body>
  <div>
    <p style="padding: 30px;">1</p>
    <p style="padding: 30px;">2</p>
    <p style="padding: 30px;">3</p>
    <p style="padding: 30px;">4</p>
    <p style="padding: 30px;">5</p>
    <p style="padding: 30px;">6</p>
    <p style="padding: 30px;">7</p>
    <p style="padding: 30px;">8</p>
    <p style="padding: 30px;">9</p>
    <!-- <img height="200" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffzn.cc%2Fwp-content%2Fuploads%2F2020%2F04%2F640-8.jpg&refer=http%3A%2F%2Ffzn.cc&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641365183&t=b5d7bdae0fe3f2c4831b52e3985abdf1" /> -->
    <img height="200"
      data-src="https://gimg2.baidu.com/image_search1/src=http%3A%2F%2Ffzn.cc%2Fwp-content%2Fuploads%2F2020%2F04%2F640-8.jpg&refer=http%3A%2F%2Ffzn.cc&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641365183&t=b5d7bdae0fe3f2c4831b52e3985abdf1" />
    <p style="padding: 30px;">1</p>
    <p style="padding: 30px;">2</p>
    <p style="padding: 30px;">3</p>
    <p style="padding: 30px;">4</p>
    <p style="padding: 30px;">5</p>
    <p style="padding: 30px;">6</p>
    <p style="padding: 30px;">7</p>
    <p style="padding: 30px;">8</p>
    <p style="padding: 30px;">9</p>
  </div>

  <script>
    var img = document.querySelector("img")
    var observer = new IntersectionObserver((arr) => {
      console.log(arr[0].isIntersecting)
      console.log(arr[0].intersectionRatio)
      if (arr[0].isIntersecting) {
        img.src = img.getAttribute('data-src')
        img.onerror = function () {
          img.src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fcdb58e6860bcf06028c4b40e47aa17fd7ffa2e6f67cc-UQZRFK_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641366439&t=07c8d22d1c35def62dcaaf04d94e1255"
        }
      }
    }, { rootMargin: "100px" })

    observer.observe(img)
  </script>
</body>

</html>